<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="#ff9854">
      <template v-for="(item, index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path"
          ><span>{{ item.text }}</span>
          <template #icon="props">
            <img
              :src="getAssetUrl(item.image)"
              alt=""
              v-if="currentIndex !== index"
            />
            <img
              :src="getAssetUrl(item.activeImage)"
              alt=""
              v-else
            /> </template
        ></van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import tabbarData from '@/assets/data/tabbar.js'
import { getAssetUrl } from '@/utils/get_assets_img.js'
import { useRouterStore } from '@/stores/modules/router.js'
const store = useRouterStore()
const currentIndex = ref(0)
watch(
  () => currentIndex.value,
  (newVal, oldVal) => {
    if (newVal > oldVal) {
      store.setRouterType('push')
    } else {
      store.setRouterType('back')
    }
  }
)
</script>
<style lang="less" scoped>
.tab-bar {
  --van-tabbar-item-font-size: 12px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;
  img {
    width: 20px;
    margin-top: 2px;
  }
}
</style>
